<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem to="/Scheduling">排版</BreadcrumbItem>
      <BreadcrumbItem to="/gzbg">工作变更</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">时段配置</h2>
  </div>

  <div class="info">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button
          style="background-color: rgb(148, 86, 53); color: aliceblue"
          @click="insertEvent()">+ 新增</vxe-button>

        <vxe-button
          style="background-color: rgb(247, 163, 142); color: aliceblue">批量删除</vxe-button>

        <vxe-button
          style="background-color: rgb(117, 216, 166); color: aliceblue">批量启用</vxe-button>

        <vxe-button
          style="background-color: rgb(255, 206, 133); color: aliceblue">批量禁用</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-overflow
      ref="xTable"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      @cell-dblclick="cellDBLClickEvent"
    >
      <vxe-column type="checkbox" width="60" align="center"></vxe-column>
      <vxe-column
        type="seq"
        width="60"
        title="序号"
        align="center"
      ></vxe-column>
      <vxe-column field="name" title="排班时间名称" align="center"></vxe-column>
      <vxe-column field="sex" title="开始时间" align="center"></vxe-column>
      <vxe-column field="age" title="结束时间" align="center"></vxe-column>
      <vxe-column
        field="address"
        title="状态"
        align="center"
        show-overflow
      ></vxe-column>
      <vxe-column title="操作" width="200" align="center" show-overflow>
        <template #default="{ row }">
          <vxe-button type="text" @click="editEvent(row)">查看</vxe-button>
          <vxe-button type="text" @click="removeEvent(row)">修改</vxe-button>
          <vxe-button type="text" @click="removeEvent(row)">启用</vxe-button>
          <vxe-button type="text" @click="removeEvent(row)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-modal
      v-model="showEdit"
      :title="selectRow ? '编辑&保存' : '新增&保存'"
      :loading="submitLoading"
      resize
      destroy-on-close
    >
      <template #default>
        <vxe-form
          :data="formData"
          :rules="formRules"
          title-align="right"
          title-width="100"
          @submit="submitEvent"
        >
          <vxe-form-item
            title="Basic information"
            title-align="left"
            :title-width="200"
            :span="24"
            :title-prefix="{ icon: 'vxe-icon-comment' }"
          ></vxe-form-item>
          <vxe-form-item field="name" title="Name" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                placeholder="请输入名称"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="nickname"
            title="Nickname"
            :span="12"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                placeholder="请输入名称"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="role" title="Role" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                placeholder="请输入角色"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="sex" title="Sex" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.sex" transfer>
                <vxe-option
                  v-for="item in sexList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="age" title="Age" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.age"
                type="number"
                placeholder="请输入年龄"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="flag1"
            title="是否单身"
            :span="12"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-radio-group v-model="data.flag1">
                <vxe-radio label="Y" content="是"></vxe-radio>
                <vxe-radio label="N" content="否"></vxe-radio>
              </vxe-radio-group>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="checkedList"
            title="可选信息"
            :visible-method="visibleMethod"
            :span="24"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-checkbox-group v-model="data.checkedList">
                <vxe-checkbox label="1" content="运动、跑步"></vxe-checkbox>
                <vxe-checkbox label="2" content="听音乐"></vxe-checkbox>
                <vxe-checkbox label="3" content="爬山"></vxe-checkbox>
                <vxe-checkbox label="4" content="吃美食"></vxe-checkbox>
              </vxe-checkbox-group>
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="Other information"
            title-align="left"
            :title-width="200"
            :span="24"
            :title-prefix="{
              message: '请填写必填项',
              icon: 'vxe-icon-info-circle-fill',
            }"
          ></vxe-form-item>
          <vxe-form-item
            field="num"
            title="Number"
            :span="12"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.num"
                type="number"
                placeholder="请输入数值"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="date3"
            title="Date"
            :span="12"
            :item-render="{}"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.date3"
                type="date"
                placeholder="请选择日期"
                transfer
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="address"
            title="Date"
            :span="24"
            :item-render="{}"
            :title-suffix="{
              message: '提示信息！！',
              icon: 'vxe-icon-question-circle-fill',
            }"
          >
            <template #default="{ data }">
              <vxe-textarea
                v-model="data.address"
                :autosize="{ minRows: 2, maxRows: 4 }"
              ></vxe-textarea>
            </template>
          </vxe-form-item>
          <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { VXETable } from "vxe-table";
const xTable = ref();
const formData = reactive({
  name: "",
  nickname: "",
  role: "",
  sex: "",
  age: 0,
  num: 0,
  checkedList: [],
  flag1: false,
  date3: "",
  address: "",
});
const submitLoading = ref(false);
const showEdit = ref(false);
const selectRow = ref();
const tableData = ref([]);

const formRules = reactive({
  name: [
    { required: true, message: "请输入名称" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符" },
  ],
  nickname: [{ required: true, message: "请输入昵称" }],
  sex: [{ required: true, message: "请选择性别" }],
});

const visibleMethod = ({ data }) => {
  return data.flag1 === "Y";
};
const insertEvent = () => {
  Object.assign(formData, {
    name: "",
    nickname: "",
    role: "",
    sex: "",
    age: 0,
    num: 0,
    checkedList: [],
    flag1: false,
    date3: "",
    address: "",
  });
  selectRow.value = null;
  showEdit.value = true;
};
const editEvent = (row) => {
  Object.assign(formData, row);
  selectRow.value = row;
  showEdit.value = true;
};
const cellDBLClickEvent = ({ row }) => {
  editEvent(row);
};
const removeEvent = async (row) => {
  const type = await VXETable.modal.confirm("您确定要删除该数据?");
  if (type === "confirm") {
    const $table = xTable.value;
    if ($table) {
      $table.remove(row);
    }
  }
};
const submitEvent = () => {
  submitLoading.value = true;
  setTimeout(() => {
    const $table = xTable.value;
    if ($table) {
      submitLoading.value = false;
      showEdit.value = false;
      if (selectRow.value) {
        VXETable.modal.message({ content: "保存成功", status: "success" });
        Object.assign(selectRow.value, formData);
      } else {
        VXETable.modal.message({ content: "新增成功", status: "success" });
        $table.insert({ ...formData });
      }
    }
  }, 500);
};
setTimeout(() => {
  const list = [
    {
      id: 10001,
      name: "Test1",
      nickname: "T1",
      role: "Develop",
      sex: "0",
      sex2: ["0"],
      num: 40,
      num1: 40,
      age: 28,
      flag1: false,
      address: "Shenzhen",
      date3: "",
      date12: "",
      date13: "",
      checkedList: [],
    },
  ];
  tableData.value = list;
}, 100);
</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}
</style>